import React, { FC } from "react";
// import { useParams } from "react-router-dom";
// import { getQuestionService } from "../../../services/question";
import useLoadQuestionData from "../../../hooks/useLoadQuestionData";
import styles from "./edit.module.scss";
import EditCanvas from "./EditCanvas";

const Edit: FC = () => {
  // const { id = "" } = useParams();
  // const [Loading, setLoading] = useState(true);
  // const [QuestionData, setQuestionData] = useState({});

  // useEffect(() => {
  //   // useEffect无法执行异步函数，所以要定义完之后调用一下
  //   async function fn() {
  //     const data = await getQuestionService(id);
  //     setQuestionData(data);
  //     setLoading(false);
  //   }
  //   fn();
  // });
  const { id, loading, data } = useLoadQuestionData();
  return (
    // <>
    //   <p>编辑问卷{id}</p>
    //   {loading ? <p>加载中ing...</p> : <p>{JSON.stringify(data)}</p>}
    // </>
    <div className={styles.container}>
      <div style={{ backgroundColor: "#fff", height: "40px" }}>头部</div>
      <div className={styles["content-wrapper"]}>
        <div className={styles.content}>
          <div className={styles.left}>左边</div>
          <div className={styles.main}>
            <div className={styles["canvas-wrapper"]}>
              {/* <div style={{ height: "900px" }}>测试画布高度滚动</div> */}
              <EditCanvas loading={loading} />
            </div>
          </div>
          <div className={styles.right}>右边</div>
        </div>
      </div>
    </div>
  );
};
export default Edit;
